import React, { Component } from 'react'
import { Input, message, Table } from "antd"
import { RootState } from '../../../../reducers'
import { connect, ConnectedProps } from 'react-redux'
import { listDevice, queryDeviceAmount, searchDevice } from '../../../../requests/Device'
import { getRes } from '../../../../configFile'
import Device from '../../../../types/Device'
import moment from 'moment'

interface PropsFromRedux extends ConnectedProps<typeof connector> { }
interface IState {
    deviceSource: Array<Device>
    amount: number
    offset: number
    limit: number
    isSearch: boolean
}
const { Search } = Input;
export class DeviceInfo extends Component<PropsFromRedux, IState> {
    constructor(props: PropsFromRedux) {
        super(props)
        this.state = {
            deviceSource: [],
            amount: 0,
            offset: 0,
            limit: 10,
            isSearch: false
        }
    }
    //获取设备数据
    getDevice = async () => {
        try {
            const amountRes = getRes(await queryDeviceAmount())
            const res = getRes(await listDevice(this.state.offset, this.state.limit))
            if (amountRes.isSuccessful && res.isSuccessful) {
                this.setState({
                    ...this.state,
                    deviceSource: res.data,
                    amount: amountRes.data
                })
            } else {
                message.error("获取设备数据失败")
            }
        }
        catch (error) {
            message.error(error.toString())
        }
    }

    componentDidMount() {
        this.getDevice()
    }

    columns = [{
        title: '设备名称',
        dataIndex: 'deviceName',
        key: 'deviceName',
        width: 300
    },
    {
        title: '厂商id',
        dataIndex: 'manufacturerID',
        key: 'manufacturerID',
        width: 100,
        ellipsis: true
    },
    {
        title: '设备id',
        dataIndex: 'deviceID',
        key: 'deviceID',
        width: 100,
    },
    {
        title: '创建时间',
        dataIndex: 'creationTime',
        key: 'creationTime',
        width: 250,
        ellipsis: true,
        render: (record: number) => {
            return moment(record).format('YYYY-MM-DD')
        }
    },
    {
        title: '最后修改时间',
        dataIndex: 'lastModifiedTime',
        key: 'lastModifiedTime',
        width: 250,
        ellipsis: true,
        render: (record: number) => {
            return moment(record).format('YYYY-MM-DD')
        }
    }]

    onSearch: (values: string) => void = async values => {
        console.log(values)
        try {
            const res = getRes(await searchDevice(values))
            if (!res.isSuccessful) {
                message.error("查询失败")
            }
            this.setState({
                ...this.state,
                deviceSource: res.data,
                amount: res.data.length,
                isSearch: true
            })
        } catch (err) {
            message.error(err.toString())
        }
    }

    render() {
        return (
            <div>
                <Search placeholder="搜索" onSearch={values => this.onSearch(values)} enterButton />
                <Table columns={this.columns}
                    dataSource={this.state.deviceSource}
                    pagination={{
                        onChange: this.state.isSearch ? undefined : (page, pageSize) => {
                            console.log(page, pageSize);
                            if (!!pageSize) {
                                this.setState({
                                    offset: (page - 1) * (pageSize),
                                    limit: (pageSize)
                                }, () => {
                                    this.getDevice()
                                })
                            } else {
                                console.error('pageSize === undefinde')
                            }
                        },
                        defaultPageSize: this.state.limit,
                        total: this.state.amount,
                        showSizeChanger: false
                    }} />
            </div>
        )
    }
}

//connect加入props
const mapStateToProps = (state: RootState) => {
    return {
        userID: state.loginReducers.userID
    }
}

const connector = connect(mapStateToProps)

export default connector(DeviceInfo)